<!DOCTYPE html>
<html lang="zh-cmn-Hans">

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, shrink-to-fit=no" />
  <meta name="renderer" content="webkit" />
  <meta name="force-rendering" content="webkit" />
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
  <title>Demo</title>
  <link rel="icon" type="image/png" href="favicon.png">
  <link rel="stylesheet" href="__STATIC__/mdui/css/mdui.min.css" />
  <script src="__STATIC__/mdui/js/mdui.min.js"></script>
  <script src="__STATIC__/welcome1/js/jquery.min.js"></script>
   <script src="__STATIC__/layuiadmin/layui/layui.js"></script>
  <script src="https://cdn.jsdelivr.net/clipboard.js/1.5.12/clipboard.min.js"></script>
  <!-- 最新版本的 Bootstrap 核心 CSS 文件 -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css" integrity="sha384-HSMxcRTRxnN+Bdg0JdbxYKrThecOKuH5zCYotlSAcp1+c8xmyTe9GYg1l9a69psu" crossorigin="anonymous">
</head>

<body class="mdui-theme-primary-indigo mdui-theme-accent-pink">
  <style>
    ::selection {
      background: rgba(0, 149, 255, .1);
    }

    body:before {
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      opacity: .3;
      z-index: -1;
      content: "";
      position: fixed;
      background-image: linear-gradient(135deg, #CE9FFC 10%, #7367F0 100%);
      /* background-image: url('https://api.vvhan.com/api/bing'); */
    }

    .mdui-textfield-input {
      float: left;
      width: 75%;
      text-transform: none;
    }

    .mdui-btn {
      width: 25%;
    }

    .mdui-container {
      max-width: 900px;
      margin-top: 2em;
      margin-bottom: 4em;
    }

    .mdui-btn,
    .mdui-fab {
      min-width: 0px;
    }

    .mdui-card {
      opacity: .8;
      padding: 2em;
      ;
      border-radius: 6px;
      width: 100%;
      font-size: 20px;
      float: right;
    }

    .down .mdui-btn {
      width: auto;
      margin-left: 1.5em;
      margin-bottom: 0.5em;
    }

    p {
      opacity: .8;
    }

    .mdui-card-content {
      padding: 16px 0 0 0;
    }

    textarea {
      height: 200px;
      width: 100%;
    }
    /* .mdui-text-center img{
      text-align: center;
    } */
  </style>

  <main class="mdui-container">
    <div class="mdui-card">
       <!-- 教程 -->
       <div class="mdui-text-center">
        <img class="img-responsive center-block" src="__STATIC__/video/images/douyin.jpg"  alt="">
     </div>
  <!-- 教程 end-->
      <!-- <img class="mdui-img-circle mdui-center" style="width: 150px;"
        src="http://q1.qlogo.cn/g?b=qq&nk=894251491&s=100" /> -->
      <h3 class='mdui-text-center'>在线短视频去水印解析</h3>
      <h3 class='mdui-text-center' style="color: chocolate;">网络资源，随时失效</h3>
      <div class="mdui-typo">
        <p>
          <strong>目前支持 </strong>
          抖音
          <!-- /皮皮虾/火山/微视/微博/绿洲/最右/轻视频/快手/全民小视频/皮皮搞笑/陌陌/Before避风/开眼/Vue
          Vlog/小咖秀/全民K歌 -->
        </p>
        <p>
          <strong>温馨提示 </strong>
          粘贴分享的视频地址时
          <u>无需删除文案</u>
          <small> 但如果视频链接正确但解析失败请删掉文案后重试</small>
        </p>
        <p>
          <strong>温馨提示 </strong>
          复制连接到新的窗口下载
        </p>
        <hr />
      </div>
      <div class="mdui-card-content mdui-typo">
        <div class="mdui-textfield mdui-textfield-floating-label">
          <input class="mdui-textfield-input" type="text" id="url" placeholder="请粘贴视频分享地址" required />
          <div class="mdui-textfield-error">
            需要解析的视频地址不能为空
          </div>
          <button class="mdui-btn mdui-color-theme-accent mdui-ripple" onclick="setValue()">解析</button>
        </div>
      </div>
      <!-- <button class="btn" data-clipboard-action="copy" data-clipboard-target="#copyurl" id="copy_btn">
                        点击复制
                    </button> -->


      <div class="down mdui-text-center"></div>

     
    </div>
  </main>
  
  <script>


    
    function setValue() {
      var data = document.getElementById("url").value;
      let regex = /http[s]?:\/\/[\w.]+[\w\/]*[\w.]*\??[\w=&:\-\+\%]*[/]*/;
      var v = data.match(regex)[0];
      // console.log(v);
      $.ajax({
        type: "POST",  //默认get
        url: "delWatermark",  //默认当前页
        data: { 'url': v },  //格式{key:value}
        dataType: "json",
        success: function (res) {  //请求成功回调
          if (res.code == 200) {
            mdui.snackbar({
              message: res.msg,
              position:'top',
              timeout:2000
            });
            console.log(res);

         
            $(".down").html(
              '<h4>' + res.data.title + ' </h4><a class="mdui-btn mdui-btn-raised" href="' + res.data.cover + '" target="_blank" download="video">下载封面</a> <a class = "mdui-btn mdui-btn-raised" data-clipboard-action="copy" data-clipboard-target="#copyurl" id="copy_btn" title="复制连接打开新的窗口下载"> 复制连接 </a><div class="mdui-text-center"><img src="' + res.data.cover + '"></div></br><textarea id="copyurl">' + res.data.url + '</textarea>');
          } else {
            mdui.snackbar({
              message: '解析失败,视频不存在或者链接不正确'
            });
          }
        },
      })

    }

    $(document).ready(function () {
      var clipboard = new Clipboard('#copy_btn');
      clipboard.on('success', function (e) {
        mdui.snackbar({
              message: "复制连接成功",
              position:"top",
              timeout:2000
            });
        // e.clearSelection();
        console.log(e.text);
        // window.location.href = e.text;
        // window.open(e.text);
      });
    });

    // 跳转
    // function btn(url) {
    //   window.location.href = url;
    // }
  </script>
</body>

</html>
